<template>
    <div>
        <!--整个容器-->
        <el-container>
            <!--上半部分-->
            <el-header class="layout-header">
                <!--显示当前登录的用户信息-->
                <div class="login-user">
                    <span class="welcome">欢迎回来,root!</span>
                    <el-dropdown>
                        <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                                   size="small"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-plus">修改资料</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus">修改头像</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus-outline">修改密码</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-check" divdi>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!--左侧标题文字-->
                <h1>酷鲨商城运营管理平台</h1>
            </el-header>
            <!--左侧标题-->
            <!--下半部分-->
            <el-container class="layout-body">
                <!--侧栏-->
                <el-aside class="layout-aside">
                    <el-menu
                            router
                            :default-active="activeMenuItemPath"
                            class="el-menu-vertical-demo"
                            background-color="#222"
                            text-color="#fff"
                            active-text-color="#fff">
                        <!--首页-->
                        <el-menu-item index="/">
                            <i class="el-icon-menu"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <!--商品管理-->
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>商品管理</span>
                            </template>
                            <el-menu-item index="2-1">
                                <i class="el-icon-menu"></i>
                                <span slot="title">SPU台账</span>
                            </el-menu-item>
                            <el-menu-item index="2-2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">新增SPU</span>
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/album">
                                <i class="el-icon-menu"></i>
                                <span slot="title">相册管理</span>
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/category">
                                <i class="el-icon-menu"></i>
                                <span slot="title">商品类别</span>
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/attributeTemplate">
                                <i class="el-icon-menu"></i>
                                <span slot="title">属性模板</span>
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/attribute">
                                <i class="el-icon-menu"></i>
                                <span slot="title">属性管理</span>
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/brand">
                                <i class="el-icon-menu"></i>
                                <span slot="title">品牌管理</span>
                            </el-menu-item>
                        </el-submenu>
                        <!--订单管理-->
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>订单管理</span>
                            </template>
                            <el-menu-item index="3-1" disabled>
                                <i class="el-icon-menu"></i>
                                <span slot="title">暂无内容</span>
                            </el-menu-item>
                        </el-submenu>
                        <!--营销管理-->
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>营销管理</span>
                            </template>
                            <el-menu-item index="4-1" disabled>
                                <i class="el-icon-error"></i>
                                <span slot="title">暂无内容</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- 商家管理 -->
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-s-shop"></i>
                                <span>商家管理</span>
                            </template>
                            <el-menu-item index="5-1" disabled>
                                <i class="el-icon-error"></i>
                                <span slot="title">暂无内容</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- 权限管理 -->
                        <el-submenu index="53">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>权限管理</span>
                            </template>
                            <el-menu-item index="/sys-admin/permission/admin">
                                <i class="el-icon-menu"></i>
                                <span slot="title">管理员管理</span>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!--主体-->
                <!--下半区域的右侧主体-->
                <el-main class="layout-main">
                    <!--将由其它视图组件来显示-->
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeMenuItemPath: ''
            };
        },
        methods: {
            handleActiveMenuItem() {
                let currentPath = this.$router.currentRoute.path;
                if (currentPath.startsWith('/sys-admin/product/album')) {
                    currentPath = '/sys-admin/product/album';
                }
                if (currentPath.startsWith('/sys-admin/permission/admin')) {
                    currentPath = '/sys-admin/permission/admin';
                }
                this.activeMenuItemPath = currentPath;
            }
        },
        mounted() {
            this.handleActiveMenuItem();
        }
    }
</script>

<style>
    .layout-header {
        background: #1684b0;
    }

    .layout-header h1 {
        line-height: 60px;
        color: white;
    }

    .layout-header .login-user {
        float: right;
        display: flex;
        margin-top: 12px;
    }

    .layout-header .login-user .welcome {
        line-height: 36px;
        color: white;
        display: inline-block;
        margin-right: 10px;
    }

    .layout-body {
        position: absolute;
        top: 60px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .layout-aside {
        background-color: #222;
    }

    .layout-aside .el-menu {
        border: 0;
    }

    .layout-aside i {
        color: white !important;
    }

    .layout-main {
        background: #fff;
    }

    .el-icon-menu.is-active {
        background: #2d3c4d !important;
    }
</style>


<script>
    export default {
        data() {
            return {
                activeMenuItemPath: '',
                loginUser: {
                    id: 9527,
                    username: '无名氏',
                    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                }
            }
        },
        methods: {
            // 处理选中下拉菜单中的选项
            handleCommand(command) {
                if (command == 'openEditInfoDialog') {
                    this.openEditInfoDialog();
                } else if (command == 'openEditAvatarDialog') {
                    this.openEditAvatarDialog();
                } else if (command == 'openEditPasswordDialog') {
                    this.openEditPasswordDialog();
                } else if (command == 'openLogoutConfirm') {
                    this.openLogoutConfirm();
                }
            },
            // 打开编辑对话框【未实现】
            openEditInfoDialog() {
                let title = '提示';
                let message = '您正在尝试修改当前登录的【' + this.loginUser.id + '-' + this.loginUser.username + '】的【基本资料】，抱歉，此功能尚未实现……';
                this.$alert(message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            },
            // 打开修改头像对话框【未实现】
            openEditAvatarDialog() {
                let title = '提示';
                let message = '您正在尝试修改当前登录的【' + this.loginUser.id + '-' + this.loginUser.username + '】的【头像】，抱歉，此功能尚未实现……';
                this.$alert(message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            },
            // 打开修改密码对话框【未实现】
            openEditPasswordDialog() {
                let title = '提示';
                let message = '您正在尝试修改当前登录的【' + this.loginUser.id + '-' + this.loginUser.username + '】的【密码】，抱歉，此功能尚未实现……';
                this.$alert(message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            },
            // 打开登出确认框
            openLogoutConfirm() {
                let message = '即将退出登录，是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleLogout();
                }).catch(() => {
                });
            },
            // 处理登出
            handleLogout() {
                let url = 'http://localhost:9081/admins/logout';
                console.log('url = ' + url);

                let loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
                this.axios
                    .create({'headers': {'Authorization': loginInfo.token}})
                    .post(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        localStorage.removeItem('loginInfo');
                        this.$router.push('/login');
                    }
                });
            },
            // 加载当前登录的用户信息
            loadLoginInfo() {
                let loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
                console.log(loginInfo)

                if (!loginInfo || new Date() > loginInfo.tokenExpiration) {
                    localStorage.removeItem('loginInfo');
                    this.$router.push('/login');
                    return;
                }

                this.loginUser = loginInfo;
            },
            // 处理激活某个菜单项
            handleActiveMenuItem() {
                let path = this.$router.currentRoute.path;
                if (path.startsWith('/sys-admin/product/spu/add-new-')) {
                    path = '/sys-admin/product/spu/add-new-1';
                }
                if (path.startsWith('/sys-admin/product/spu-management')) {
                    path = '/sys-admin/product/spu-management';
                }
                if (path.startsWith('/sys-admin/product/album')) {
                    path = '/sys-admin/product/album';
                }
                if (path.startsWith('/sys-admin/product/category')) {
                    path = '/sys-admin/product/category';
                }
                if (path.startsWith('/sys-admin/product/brand')) {
                    path = '/sys-admin/product/brand';
                }
                if (path.startsWith('/sys-admin/product/attribute-template')) {
                    path = '/sys-admin/product/attribute-template';
                }
                if (path.startsWith('/sys-admin/product/attribute')) {
                    path = '/sys-admin/product/attribute';
                }
                if (path.startsWith('/sys-admin/permission/admin')) {
                    path = '/sys-admin/permission/admin';
                }
                this.activeMenuItemPath = path;
            }
        },
        mounted() {
            this.handleActiveMenuItem();
            this.loadLoginInfo();
        }
    }
</script>